<template>
  <a-modal
    :title="title"
    v-model="visible"
    width="36%"
    :maskClosable="false"
    :closable="false"
  >
    <div>
      <a-form>
        <a-form-item
          label="标题"
          :labelCol="{ span: 4 }"
          :wrapperCol="{ span: 20 }"
          required
        >
          <a-input v-model="name" placeholder="请输入标题" />
        </a-form-item>
        <a-form-item
          label="图片"
          :labelCol="{ span: 4 }"
          :wrapperCol="{ span: 20 }"
          required
        >
          <div class="clearfix cover-box">
            <a-upload
              class="upload"
              :customRequest="onUploadImg"
              list-type="picture-card"
              :show-upload-list="false"
            >
              <img class="img" v-if="logo" :src="logo" alt="avatar" />
              <div v-else>
                <a-icon type="plus" />
              </div>
            </a-upload>
            <a-icon
              type="close-circle"
              theme="filled"
              v-if="logo"
              @click.stop="onRemoveImg"
            />
          </div>
        </a-form-item>
        <a-form-item
          class="u-flex"
          label="排序"
          :labelCol="{ span: 4 }"
          :wrapperCol="{ span: 20 }"
          required
        >
          <div class="u-flex">
            <a-button class="subtract" :disabled="sort <= 0" @click="onSubtract"
              >-</a-button
            >
            <a-input-number
              class="sort"
              v-model="sort"
              placeholder="请输入排序"
            />
            <a-button class="plus" @click="onPlus">+</a-button>
          </div>
        </a-form-item>
        <a-form-item
          label="有效期"
          :labelCol="{ span: 4 }"
          :wrapperCol="{ span: 20 }"
          required
        >
          <a-range-picker :format="dateFormatList" v-model="time" show-time />
        </a-form-item>
      </a-form>
    </div>
    <template #footer>
      <a-button key="back" @click="onCancel">取消</a-button>
      <a-button key="submit" type="primary" @click="onConfirm">确认</a-button>
    </template>
  </a-modal>
</template>
<script>
import { dataSource as ds } from '@/services'
import dayjs from 'dayjs'
export default {
  name: 'modal',
  data() {
    return {
      loading: false,
      visible: false,
      format: 'YYYY-MM-DD HH:mm:ss',
      dateFormatList: ['YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss'],
      title: '',
      type: '',
      id: '',
      name: '',
      logo: '',
      sort: null,
      time: []
    }
  },
  methods: {
    open(e) {
      const { type, id, name, logo, sort, startTime, endTime } = e
      this.type = type
      this.id = id ?? ''
      this.name = name ?? ''
      this.logo = logo ?? ''
      this.sort = sort ?? null
      this.time = startTime && endTime ? [startTime, endTime] : []
      this.visible = true
    },

    // banner图上传
    onUploadImg(e) {
      let fd = new FormData()
      fd.append('file', e.file)
      ds.baseUpload(fd).then((res) => {
        console.log(res, 111)
        if (res?.data?.code == 200) {
          this.logo = res?.data?.data?.url
        }
      })
    },
    onRemoveImg() {
      this.logo = ''
    },
    onSubtract() {
      this.sort--
    },
    onPlus() {
      this.sort++
    },
    // 取消
    onCancel() {
      this.visible = false
    },
    // 新增/修改
    async onConfirm() {
      const { type, name, logo, sort, time, format } = this
      if (!name) {
        this.$message.error('请输入标题')
        return false
      } else if (!logo) {
        this.$message.error('请上传图片')
        return false
      } else if (!sort) {
        this.$message.error('请输入排序')
      } else if (time?.length == 0) {
        this.$message.error('请选择有效期')
      } else {
        console.log(this.time, 111)
        const params = {
          name,
          logo,
          sort,
          startTime: dayjs(time[0]).format(format),
          endTime: dayjs(time[1]).format(format)
        }
        const res =
          type == 'add'
            ? await ds.addOrEditBanner(params)
            : await ds.addOrEditBanner({ ...params, id: this.id })
        if (res?.data?.code == 200) {
          this.$message.success(type == 'add' ? '新建成功！' : '编辑成功！')
          this.visible = false
          this.$emit('confirm')
        }
      }
    }
  }
}
</script>

<style lang="less">
.cover-box {
  position: relative;
  .img {
    width: 500px;
    height: 300px;
    display: block;
  }
  .ant-upload {
    width: 500px;
    height: 300px;
  }
  .remove {
    position: absolute;
    top: -10px;
    right: -10px;
  }
}
// .ant-btn {
//   background: #f5f7fb;
// }
.subtract {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.plus {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.sort {
  width: 100px;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  .ant-input-number-input {
    text-align: center;
  }
}
.anticon-close-circle {
  position: absolute;
  top: -5px;
  right: 5px;
}
</style>
